<script setup lang="ts">
import { getObjValue } from '@/utils/util';
import dayjs from 'dayjs';
import chart1 from '@/assets/images/platformChart/chart_1.webp';

defineProps<{
  segObj: any;
}>();
</script>
<template>
  <div class="rounded-xl bg-white shadow mt-3 pb-4">
    <div class="title-2 p-4 flex justify-between items-center">
      <span>{{ segObj?.title || '-' }}</span>
      <span class="text-xs text-[#999]">{{ dayjs().format('YYYY年') }}</span>
    </div>
    <div class="flex px-3">
      <div class="flex-1">
<!--        <div class="title-1 text-[#326BFF]">{{ getObjValue(segObj?.data?.[0]?.[0])[1] }}</div>-->
<!--        <div class="text-xs text-[#999] mr-3">{{ getObjValue(segObj?.data?.[0]?.[0])[0] }}</div>-->

<!--        <div class="mt-3">-->
<!--            <span class="text-xs text-[#999]">{{ getObjValue(segObj?.data?.[0]?.[1])[0] }}</span>-->
<!--        </div>-->
<!--        <div class="mt-1">-->
<!--            <span class="font-medium">{{ getObjValue(segObj?.data?.[0]?.[1])[1] }}</span>-->
<!--        </div>-->
<!--        <div class="mt-3">-->
<!--            <span class="text-xs text-[#999]">{{ getObjValue(segObj?.data?.[0]?.[2])[0] }}</span>-->
<!--        </div>-->
<!--        <div class="mt-1">-->
<!--            <span class="font-medium">{{ getObjValue(segObj?.data?.[0]?.[2])[1] }}</span>-->
<!--        </div>-->
        <div class="flex items-center justify-between">
          <div>
            <span class="text-xs text-[#999]">{{ getObjValue(segObj?.data?.[0]?.[0])[0] }} </span> <br>
            <span class="font-medium text-[red]">{{ getObjValue(segObj?.data?.[0]?.[0])[1] }}</span>
          </div>
          <div>
            <span class="text-xs text-[#999]">{{ getObjValue(segObj?.data?.[0]?.[1])[0] }} </span> <br>
            <span class="font-medium text-[#326BFF]">{{ getObjValue(segObj?.data?.[0]?.[1])[1] }}</span>
          </div>
          <div>
            <span class="text-xs text-[#999]">{{ getObjValue(segObj?.data?.[0]?.[2])[0] }}</span> <br>
            <span class="font-medium text-[#9941F6]">{{ getObjValue(segObj?.data?.[0]?.[2])[1] }}</span>
          </div>
        </div>
      </div>
<!--      <div class="flex-1 flex justify-end">-->
<!--        <van-image width="153" height="72" fit="cover" :src="chart1" />-->
<!--      </div>-->
    </div>
    <div class="mt-4" v-if="segObj?.data">
      <div class="bg-[#F6F7F8] mx-3 rounded px-2 py-1 text-xs text-[#1a1a1a] flex leading-6">
        <div
          class="flex-1"
          :class="{ 'text-right': idx > 0 }"
          v-for="(item, idx) in segObj?.data?.[1] || []"
          :key="idx"
        >
          {{ item }}
        </div>
      </div>
      <div class="mx-3 mt-1 rounded px-2 py-1 text-xs text-[#1a1a1a] flex leading-6">
        <div
          class="flex-1"
          :class="{ 'text-[#999]': idx === 0, 'text-right': idx > 0 }"
          v-for="(item, idx) in segObj?.data?.[2] || []"
          :key="idx"
        >
          {{ item }}
        </div>
      </div>
      <div class="mx-3 mt-1 rounded px-2 py-1 text-xs text-[#1a1a1a] flex leading-6">
        <div
          class="flex-1"
          :class="{ 'text-[#999]': idx === 0, 'text-right': idx > 0 }"
          v-for="(item, idx) in segObj?.data?.[3] || []"
          :key="idx"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>
